<template>
  <div class="allmusiclist">
    <div></div>
    <div class="select">
      <div class="selectType" @click="selectShow = !selectShow">
        <p>全部</p>
        <div></div>
        <!--  小箭头 -->
        <span class="arrow" :style="selectShow ? opacity().opacityArrow : ''"></span>
      </div>

      <div
        class="selectBox"
        :class="{ selectBG: themeColor.theme == 'black' }"
        :style="selectShow ? opacity().opacityBox : ''"
      >
        <p>全部歌单分类</p>
        <div v-for="(cat, i) in SelectDetailList" :key="i" class="selectTitle">
          <p>{{ i }}</p>
          <div class="selectOption">
            <p v-for="(select, J) in cat" :key="J" @click="ClickCatList(select.name)">
              {{ select.name }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="selectHot">
      <p>热门标签：</p>
      <p v-for="tag in tagHot" :key="tag.id" class="">
        {{ tag.name }}
      </p>
    </div>
    <gridList :gridListInfo="gridListInfo" />
    <pagination
      :all="all"
      :active="active"
      :continuous="continuous"
      @getActive="getActive"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, watch } from "vue";
import { useSendReq } from "@/store/sendReq";
import { useThemeColor } from "@/store/themeColor";
import gridList from "@/components/gridList.vue";
import pagination from "@/components/pagination.vue";
const sendReq = useSendReq();
const themeColor = useThemeColor();
const gridListInfo = reactive<musicList[]>([]);
const SelectDetailList = ref<SelectDetail>({} as SelectDetail);
const tagHot = reactive<SelectHot[]>([]);
const selectShow = ref<boolean>(false);
const selectActive = ref("全部");
const selectColor = ref();
const selectBorder = ref();
// 分页器
const all = ref(30);
const active = ref(1);
const continuous = ref(5);
// 歌单请求
const getNewMusic = () => {
  let params = {
    cat: selectActive.value,
    offset: active.value * 50,
    limit: 50,
  };
  sendReq.getAllMusicList(params).then((res) => {
    gridListInfo.push(...res.playlists);
  });
};
// 分类
sendReq.getCatList().then((res) => {
  SelectDetailList.value = res.sub.reduce((a: any, b) => {
    for (let key in res.categories) {
      if (!a[res.categories[key]]) a[res.categories[key]] = [];
      else if (b.category == key) a[res.categories[key]].push(b);
    }
    return a;
  }, {});
});
sendReq.getSelectHot().then((res) => {
  tagHot.push(...res.tags);
});
const ClickCatList = (name: string) => {
  selectActive.value = name;
  selectShow.value = !selectShow.value;
  gridListInfo.length = 0;
  getNewMusic();
};
// 分页器
const getActive = (num: number | string) => {
  // getPagination(params);
  if (typeof num == "string") {
    if (num == "subtract") active.value--;
    if (num == "add") active.value++;
  } else active.value = num;
  gridListInfo.length = 0;
  getNewMusic();
};
getNewMusic();

//  下面是样式控制
// 颜色
const themeStyle = computed(() => {
  let a: Record<string, string> = {
    blackC: "#fff",
    whiteC: "#747474",
    deeppinkC: "deeppink",

    blackArrow: "#2d2f33",
    whiteArrow: "#fff",
    deeppinkArrow: "#fff",

    blackHover: "#b82525",
    whiteHover: "#2d8cf0",
    deeppinkHover: "deeppink",
  };
  let themeC = a[`${themeColor.theme}C`];
  let themeArrow = a[`${themeColor.theme}Arrow`];
  let themeHover = a[`${themeColor.theme}Hover`];
  return { themeC, themeArrow, themeHover };
});

// 动态鼠标经过的颜色
watch(
  () => themeColor.theme,
  () => {
    let theme: Record<string, string> = {
      black_color: "#43454b",
      black_border: "",
      white_color: "#515a6e",
      white_border: "#2d8cf0",
      deeppink_color: "deeppink",
      deeppink_border: "deeppink",
    };
    selectBorder.value = theme[`${themeColor.theme}_border`];
    selectColor.value = theme[`${themeColor.theme}_color`];
  },
  {
    immediate: true,
  }
);

// 箭头的层级要比 盒子高 不然样式不匹配
const opacity = () => {
  let opacityArrow = `opacity: 1; z-index:99;`;
  let opacityBox = `opacity: 1; z-index:50;`;
  return { opacityArrow, opacityBox };
};
</script>
<style lang="less" scoped>
.allmusiclist {
  .select {
    .selectType {
      margin-top: 20px;
      display: flex;
      width: 116px;
      height: 40px;
      border: 1px solid #f2f2f2;
      border-radius: 10px;
      align-items: center;
      justify-content: center;
      position: relative;
      > div {
        width: 10px;
        height: 10px;
        border: 1px solid #000;
        border-width: 0px 2px 2px 0;
        transform: rotate(45deg);
        margin: 0 6px 7px;
      }
      & > .arrow {
        transition: all 0.6s;
        border-bottom: 15px solid v-bind("themeStyle.themeArrow");
        border-top: 20px solid transparent;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        position: absolute;
        left: 53px;
        opacity: 0;
        z-index: -1;
        top: 27px;
        filter: drop-shadow(0 -1px 1px #2d2f33);
      }
    }

    .selectBG {
      border: 0 !important;
      background-color: #2d2f33 !important;
    }

    .selectBox {
      transition: all 0.6s;
      opacity: 0;
      z-index: -1;
      position: absolute;
      margin-top: 17px;
      padding: 20px;
      width: 500px;
      border: 1px solid #dcdfe6;
      border-radius: 10px;
      height: 420px;
      overflow-y: scroll;
      background-color: white;
      color: #515a6e;

      &::-webkit-scrollbar {
        width: 0;
      }
      > P {
        padding-bottom: 16px;
        border-bottom: 1px solid #dcdfe6;
        font-size: 22px;
        font-weight: 600;
        color: v-bind("themeStyle.themeC");
        margin-bottom: 20px;
      }
      > .selectTitle {
        width: 100%;
        margin-bottom: 20px;
        position: relative;

        > p {
          position: absolute;
          color: v-bind("themeStyle.themeC");
          font-size: 24px;
          line-height: 35px;
        }
        > .selectOption {
          box-sizing: border-box;
          margin-left: 80px;
          display: flex;
          width: calc(100%-80px);
          flex-wrap: wrap;
          align-items: center;
          > P {
            text-align: center;
            width: 24%;
            border: 1px solid #e8eaec;
            height: 35px;
            line-height: 35px;
          }

          > P:hover {
            border: 1px solid v-bind(selectBorder);
            color: v-bind(selectColor);
          }
        }
      }
    }
  }
  .selectHot {
    margin-top: 20px;
    display: flex;
    p {
      width: fit-content;
      margin-right: 25px;
      font-size: 18px;
    }
    P:hover {
      color: v-bind("themeStyle.themeHover");
    }
  }
}
</style>
